<template >
  <div class="sxsupplier" style="margin: 50px;">
    <el-container>
      <el-header>
        <el-steps :active="activesun" finish-status="success">
          <el-step title="开始" />
          <el-step title="阅读协议" />
          <el-step title="注册信息" />
        </el-steps>
      </el-header>
      <el-main>
        <div v-if="activesun==1">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-card style="text-align: center;">
                <el-icon style="font-size: 40px;"><Flag /></el-icon>
                <p style="margin: 10px 0;">注册成为新供应商</p>
                <el-button type="primary" @click="activesun++;">下一步</el-button>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card style="text-align: center;">
                <el-icon  style="font-size: 40px;"><Message /></el-icon>
                <p style="margin: 12px 0;opacity: 0;">123</p>
                <el-button @click="clickLogin">返回登录</el-button>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="activesun2" v-if="activesun===2">
          <div class="actbody">
            <el-tabs v-model="activeName" class="demo-tabs">
              <el-tab-pane label="注册协议/Register Guide" name="first">
                <div class="text" v-html="text"></div>
              </el-tab-pane>
              <el-tab-pane label="保密协议/Security Policy" name="second"><div class="text" v-html="text2"></div></el-tab-pane>
            </el-tabs>
          </div>
          <el-button @click="activesun--;">上一步</el-button>
          <el-button type="primary" @click="activesun++;">同意并继续</el-button>
        </div>
        <div v-if="activesun===3"  style="text-align: center">

            <el-form ref="companyForms" :model="companyForm" :rules="companyRules" label-width="150px" status-icon style="margin: 0 auto">
                <el-form-item label="公司全称" prop="companyName">
                    <el-input v-model="companyForm.companyName" ></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="name">
                    <el-input v-model="companyForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="phone">
                    <el-input v-model="companyForm.phone" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="sphone">
                    <el-input v-model="companyForm.sphone" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item style="margin-left:200px ">
                    <el-button @click="activesun--">上一步</el-button>
                    <el-button type="primary" @click="submitForm(companyForms)" :disabled="istijiao">提交</el-button>
                </el-form-item>
            </el-form>

        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {ref,reactive,toRefs,onMounted} from 'vue'
import {text,text2} from './index'
import { Session } from '/@/utils/storage';
import { useRoute, useRouter } from 'vue-router';
import {create} from '/@/api/linkoo/supplier/manager'
import {ElMessage} from "element-plus";
export default {
  setup(){
    let companyForms = ref(null)
    const route = useRoute();
    const router = useRouter();
    let state = reactive({
      istijiao:false,
      activesun:1,
      activeName:'first',
      text:text,
      token:null,
      text2:text2,
      form:{
      },
      companyRules:{
        companyName:[{ required: true, message: '必填项，请完善', trigger: 'blur' }],
        name:[{ required: true, message: '必填项，请完善', trigger: 'blur' }],
        phone:[{ required: true, message: '必填项，请完善', trigger: 'blur' },{pattern:/^.{6,8}$/,message: '数位6~8',trigger: 'blur'}]
        ,sphone:[{ required: true, message: '必填项，请完善', trigger: 'blur' },{ validator: validateField2, trigger: 'blur' }]
      },
      companyForm:{ companyName:'',name:'',phone:''}
    })
    onMounted(() => {
      state.token = Session.get('token');
    })
    function validateField2 (rule, value, callback){
      console.log(value,state.companyForm.phone);
      if (value != state.companyForm.phone) {
        callback(new Error('密码不一致'));
      } else {
        callback();
      }
    }
    const submitForm = async(formEl)=>{
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          state.istijiao=true
            console.log(state.companyForm)
          create(state.companyForm).then(res=>{
            if(res.code===0){
              ElMessage.success("注册成功!")
              router.push('/');
            }else{
              state.istijiao=false
            }
          })
        }
      })
    }
    const clickLogin = ()=>{
      router.push('/home');
    }
    return {
        companyForms,validateField2,
      ...toRefs(state),
        submitForm,
      clickLogin
    }
  }
}
</script>
<style lang="scss">
  .sxsupplier .el-step__icon-inner{
    font-size: 14px !important;
  }
  .activesun2{
    text-align: center;
    .actbody{
      text-align: left;
      border: 1px solid rgba(160, 157, 157, 0.465);
      width: 100%;
      padding:0 20px 10px;
      .text{
        height: 300px;
        overflow-y: auto;
      }
    }
    .el-button{
      margin: 10px;
    }
  }
  .el-form{
    width: 800px;
  }
</style>